.lifang {
  position: absolute;
  width: calc(50% - 100px);
  height: calc(50% - 100px);
}
.choose {
  width: 600px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
}
.btn {
  display: inline-block;
  width: 65px;
  height: 35px;
  font-size: 15px;
  border: 1px solid #999;
  text-align: center;
  line-height: 35px;
  border-radius: 13px;
}
.btn:hover {
  box-shadow: 0 0 10px #666;
}
#front:checked ~ .lifang {
  transform: rotate3d(0, 0, 0, 0deg);
}
#front:checked ~ .choose [for="front"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
#back:checked ~ .lifang {
  transform: rotate3d(0, 1, 0, 180deg);
}
#back:checked ~ .choose [for="back"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
#left:checked ~ .lifang {
  transform: rotate3d(0, 1, 0, 90deg);
}
#left:checked ~ .choose [for="left"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
#right:checked ~ .lifang {
  transform: rotate3d(0, 1, 0, -90deg);
}
#right:checked ~ .choose [for="right"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
#top:checked ~ .lifang {
  transform: rotate3d(1, 0, 0, -90deg);
}
#top:checked ~ .choose [for="top"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
#bottom:checked ~ .lifang {
  transform: rotate3d(1, 0, 0, 90deg);
}
#bottom:checked ~ .choose [for="bottom"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
#big:checked ~ .lifang {
  transform: translateZ(500px);
}
#big:checked ~ .choose [for="big"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
#small:checked ~ .lifang {
  transform: translateZ(-500px) rotate3d(1, 0, 0, 90deg);
}
#small:checked ~ .choose [for="small"] {
  color: #fff;
  background-color: #777;
  box-shadow: 0 0 10px #333;
}
